/*
 * @Author: 脉迈
 * @Date: 2021-10-26 17:05:38
 * @LastEditors: 脉迈
 * @LastEditTime: 2021-10-26 17:28:49
 */
import React, { Fragment } from "react";
import BlockImage from "plugins/blockImage/blockImage";
import BlockText from "plugins/blockText/blockText";
import BlockButton from "plugins/blockButton/blockButton";
import { transformProps, transformStyle } from "utils/helper";
import styles from "./preview.module.scss";
const data: any = [
  {
    style: {
      position: "relative",
      height: 300,
      backgroundColor: "",
      backgroundImage: "",
      backgroundSize: "cover",
    },
    children: [
      {
        name: "blockButton",
        style: {
          position: "absolute",
          width: 194,
          height: 32,
          top: 221,
          left: 93,
          rotate: 0,
          zIndex: 3,
          opacity: 1,
        },
        properties: {
          text: {
            label: "文本",
            value: "按钮",
            format: "text",
            editorType: "Input",
            attr: "text",
          },
          style: {
            label: "样式",
            value: {
              borderColor: "transparent",
              borderSize: 1,
              borderRadius: 10,
              fontSize: 16,
              color: "rgba(255,255,255,1)",
              backgroundColor: "rgba(24,144,255,1)",
              textAlign: "center",
            },
            attr: "style",
            editorType: "StyleType",
          },
          link: {
            label: "跳转链接",
            value: "https://www.baidu.com",
            format: "text",
            editorType: "Input",
            attr: "link",
          },
        },
      },
      {
        name: "blockImage",
        style: {
          position: "absolute",
          width: 395,
          height: 369,
          top: -52,
          left: -20,
          rotate: 0,
          zIndex: 2,
          opacity: 1,
        },
        properties: {
          src: {
            label: "图片地址",
            value:
              "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
            format: "image",
            editorType: "Input",
            attr: "src",
          },
          link: {
            label: "跳转链接",
            value: "https://www.baidu.com",
            format: "text",
            editorType: "Input",
            attr: "link",
          },
        },
      },
    ],
  },
  {
    style: {
      position: "relative",
      height: 300,
      backgroundColor: "",
      backgroundImage: "",
      backgroundSize: "cover",
    },
    children: [],
  },
];
export default function Preview() {
  const renderComponent = () => {
    return data.map((item: any, index: number) => {
      return (
        <div
          key={index}
          style={{
            ...item.style,
            overflow: "hidden",
            backgroundImage: `url(${item.style.backgroundImage})`,
          }}
        >
          {renderComponentChildren(item, index)}
        </div>
      );
    });
  };

  const renderComponentItem = (item: any, props: any) => {
    if (item.name === "blockImage") {
      return <BlockImage {...props}></BlockImage>;
    } else if (item.name === "blockText") {
      return <BlockText {...props}>{props}</BlockText>;
    } else if (item.name === "blockButton") {
      return <BlockButton {...props}>{props}</BlockButton>;
    }
  };

  const renderComponentChildren = (item: any, index: number) => {
    // eslint-disable-next-line
    return item.children.map((Citem: any, Cindex: number) => {
      const props = transformProps(Citem.properties);
      return (
        <div style={{ ...transformStyle(Citem.style) }} key={Cindex}>
          {renderComponentItem(Citem, props)}
        </div>
      );
    });
  };

  return (
    <Fragment>
      <div className={styles.main}>{renderComponent()}</div>
    </Fragment>
  );
}
